<!--
@author pan
@createDate 2022/02 2022/2/26 16:09
-->
<script setup lang="ts">
import { computed, ref } from 'vue'
import { SystemNavMenu, UserToolbar, SystemLogo } from 'components/index'
import { SystemMenuType } from '@/system'
import { useLoginUserStore } from 'store/modules/LoginUserStore'

// 是否启用侧边布局
const enableSideLayout = ref(true)
// 布局class
const mainLayoutClass = computed(() =>
  enableSideLayout.value ? 'jsSideLayout' : 'jsTopLayout'
)

function onChangeLayout() {
  enableSideLayout.value = !enableSideLayout.value
}

const loginUserStore = useLoginUserStore()
const menuArr = computed<SystemMenuType[]>(() => {
  if (
    loginUserStore.loginUserInfo &&
    loginUserStore.loginUserInfo.menus &&
    loginUserStore.loginUserInfo.menus.length > 0
  ) {
    return loginUserStore.loginUserInfo.menus
  } else {
    return []
  }
})
// 菜单是否收缩
const menuCollapse = ref(false)
const menuCollapseClass = computed(() =>
  menuCollapse.value ? 'jsLeftPanelCollapse' : ''
)
function onMenuCollapse(collapse: boolean) {
  menuCollapse.value = collapse
}
</script>

<template>
  <div class="basicLayout" :class="mainLayoutClass">
    <header class="topPanel">
      <div class="logoPanel">
        <SystemLogo></SystemLogo>
      </div>
      <div class="topMenuPanel">
        <SystemNavMenu
          v-if="!enableSideLayout"
          :enable-side-model="enableSideLayout"
          :menu-arr="menuArr"
          @menuCollapse="menuCollapseClass"
        ></SystemNavMenu>
      </div>
      <div class="userToolbarPanel">
        <UserToolbar></UserToolbar>
      </div>
    </header>
    <main class="centerPanel">
      <div class="leftPanel" :class="menuCollapseClass">
        <SystemNavMenu
          v-show="enableSideLayout"
          :enable-side-model="enableSideLayout"
          :menu-collapse="menuCollapse"
          :menu-arr="menuArr"
          @menuCollapse="onMenuCollapse"
        ></SystemNavMenu>
      </div>
      <div class="rightPanel">
        <router-view></router-view>
      </div>
    </main>
  </div>
</template>

<style lang="scss" scoped>
.basicLayout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.topPanel {
  display: flex;
  flex-direction: row;
  height: $topNavHeight;
  flex-shrink: 0;
  background-color: $topNavDarkBg;
  .logoPanel {
    width: 208px;
  }
  .topMenuPanel {
    padding-left: 20px;
  }
  .userToolbarPanel {
    width: 290px;
    margin-left: auto;
  }
}

.centerPanel {
  display: flex;
  height: 100%;
  overflow: hidden;
  flex-direction: row;
  flex: 1;

  .rightPanel {
    box-sizing: border-box;
    flex: 1;
    overflow: auto;
  }

  .leftPanel {
    width: 208px;
    background: $white;
    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
    z-index: 1;
  }
  ::v-deep(.cSystemMenuMain .systemElMenu) {
    border-right: none;
  }
}
.jsLeftPanelCollapse {
  width: 64px !important;
}
.jsTopLayout {
  .topPanel {
    background-color: $topNavDarkBg;
  }
  ::v-deep(.cSystemMenuMain .systemElMenu),
  ::v-deep(.cSystemMenuMain .systemElMenu .el-sub-menu__title:hover),
  ::v-deep(.cSystemMenuMain .systemElMenu > .el-menu-item:hover) {
    background-color: $topNavDarkBg;
  }
  ::v-deep(.cSystemMenuMain .systemElMenu i),
  ::v-deep(.cSystemMenuMain .systemElMenu span) {
    color: $white;
  }
}
.jsTopLayout {
  .leftPanel {
    width: 0;
  }
}
</style>
